<template>
  <div id="Base" class="company-detail pt116">
    <div class="company-detail__warp">
      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/">首页</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/public/matter/register">进疆报送企业信息公示</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>企业详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
			<div class="company-detail__header">
          <div class="staff-info">

            <div class="staff-top flex-s">
              <div class="logo-text">{{ sliceE4(detail?.compName) }}</div>
              <div class="staff-box">
                <h3> {{ detail?.compName }}  <i class="ic">进疆企业</i></h3>
                <p>统一社会信用代码 : {{ detail?.compCreditCode }} </p>
              </div>
            </div>
            <div class="staff-bottom">
              <p><span>企业法定代表人 :</span>{{ detail?.compCeoName }}</p>
              <p><span>企业区划 :</span>{{ detail?.regionCodeName }}</p>
              <p><span>注册类型 :</span>{{ detail?.compRegTypeName }}  </p>
              <p><span>注册资本（万元）:</span> {{ detail?.compRegCapital }}</p>
              <p><span>建立日期 :</span> {{ parseTime(detail?.compEstDate) }}</p>
              <p><span>营业期至 :</span> {{ detail?.compYyqx }}</p>
              <p style="width: 100%;"><span>注册地址 :</span>{{ detail?.compRegAddr }}  </p>
              <p style="width: 100%;"><span> 办公地址 : {{detail?.compBusiAddr}}</span></p>
            </div>

          </div>


			</div>

      <section class="mb20">
        <Main></Main>
      </section>

      <section class="mb20">
        <corpApt></corpApt>
      </section>

      <section class="mb20">
        <comStaff></comStaff>
      </section>

      <section class="mb20">
        <branch></branch>
      </section>
		</div>
  </div>
  <!--<branch id="branch"/> 分支机构-->
</template>

<script lang="ts">
import {defineComponent, onMounted, provide, ref} from 'vue';
import { Breadcrumb} from "ant-design-vue";
import {useRoute} from "vue-router";
import { getQyMainApi , qyMainBaseModel} from "/@/api/foreign";
import { parseTime } from "/@/utils";
import { Main , corpApt , comStaff , branch } from './src';
export default defineComponent({
	components: {
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator,
    Main , corpApt , comStaff , branch
  },
  name: "foreign",
  setup(){
    const { params } = useRoute();
    const corpId:string = params.id as string;
    const detail = ref<qyMainBaseModel>({});
    provide('corpId', corpId);
    const init = async() => {
      let{ success , data } = await getQyMainApi({corpId});
      success && data ? detail.value = data : console.log ('接口返回错误或者data值为null')

    }
    onMounted(init);
    return {
      detail , parseTime
    }
  },
  methods: {
    sliceE4: function (val) {
      if (val) {
        return val.slice(0, 4);
      }
    },
  }
})
</script>

<style lang="less" scoped>
.company-detail {

  .company-detail__warp {
    width: @main-width;
    margin: 0 auto;

    .company-detail__header {
      position: relative;
      padding: 30px;
      margin-bottom: 20px;
      background: #FFF;

    }
  }

  .staff-info{

    .staff-top{
      position: relative;
      margin-bottom: 15px;

      .logo-text{
        width: 110px;
        height: 110px;
        padding: 10px 10px;
        margin-right: 24px;
        font-size: 36px;
        font-weight: 400;
        line-height: 40px;
        color: #fff;
        text-align: center;
        background: #1985FF;
        border-radius: 4px;
      }

    }

    .staff-box{
      width: 1000px;
      padding-top: 5px;

      h3{
        min-height: 30px;
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        color: #1A1F33;

        .ic{
          display: inline-block;
          height: 26px;
          padding: 2px 8px;
          margin-left: 10px;
          font-size: 14px;
          line-height: 20px;
          color: #1985FF;
          border: 1px solid #1985FF;
          border-radius: 2px;
          transform: translateY(-2px);
        }
      }

      >p{
        font-size: 16px;
      }

      .credit {
        min-height: 45px;
        margin-bottom: 0;

        >li{
          display: inline-block;
          margin-right: 16px;
          overflow: hidden;

          span{
            display: inline-block;
            float: left;
            padding: 4px 10px;
            font-size: 14px;

            &:first-child{
              color: white;

            }
          }

          &.color1{
            span:first-child{
              background: #16AFE8;
            }

            span:first-child+span{
              color: #2CB6EA;
              background: rgba(44, 182, 234, .1);
            }
          }

          &.color2{
            span:first-child{
              background: rgba(255, 147, 78, 1);
            }

            span:first-child+span{
              color: rgba(255, 147, 78, 1);
              background: rgba(255, 147, 78, .1);
            }
          }

          &.color3{
            span:first-child{
              background: rgba(136, 105, 255, 1);
            }

            span:first-child+span{
              color: rgba(136, 105, 255, 1);
              background: rgba(136, 105, 255, .1);
            }
          }



        }
      }
    }

    .staff-bottom {
      display: flex;
      padding: 16px 20px;
      flex-wrap: wrap;
      background: #f7f8fa;

      p {
        width: 450px;
        padding-right: 20px;
        margin: 4px 0;
        line-height: 22px;
        color: #000;

        > span {
          margin-right: 8px;
          line-height: 20px;
          color: #777;
        }

        &:nth-child(2n) {
          width: calc(100% - 450px);
        }
      }
    }

  }

}
</style>
